<template>
  <view class="recruit-tabs">
    <view 
      v-for="tab in tabs" 
      :key="tab.value"
      class="recruit-tab" 
      :class="{ 'recruit-tab--active': modelValue === tab.value }"
      @click="handleTabChange(tab.value)"
    >
      {{ tab.label }}
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  tabs: {
    type: Array,
    default: () => [
      { label: '岗位列表', value: 'list' },
      { label: '我的申请', value: 'my' },
      { label: '我的收藏', value: 'favorite' }
    ]
  }
});

const emit = defineEmits(['update:modelValue']);

// 处理标签切换
const handleTabChange = (value) => {
  emit('update:modelValue', value);
};
</script>

<style lang="scss" scoped>
.recruit-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.recruit-tab {
  flex: 1;
  text-align: center;
  font-size: 15px;
  color: #666;
  padding: 12px 0;
  position: relative;
  
  &--active {
    color: #1890ff;
    font-weight: 500;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 3px;
      background-color: #1890ff;
      border-radius: 1.5px;
    }
  }
}
</style>
